<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>预约订单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="images/icons/favicon.ico">
    <link rel="apple-touch-icon" href="images/icons/favicon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png">
    <!--Loading bootstrap css-->
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
    <link type="text/css" rel="stylesheet" href="styles/jquery-ui-1.10.4.custom.min.css">
    <link type="text/css" rel="stylesheet" href="styles/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="styles/all.css">
    <link type="text/css" rel="stylesheet" href="styles/main.css">
    <link type="text/css" rel="stylesheet" href="styles/jplist-custom.css">
    <style>
	/*分页时底部样式*/
	.dibu-r ul,li{margin:0;padding:0;}
	.dibu-r ul{list-style:none;}
	.dibu{ width:100%;  margin:auto;font-size:18px; font-family:"微软雅黑"; color:#6f6e6e;  margin-top:15px; margin-bottom:50px;}
	.dibu span{ color:#3792f2;}
	.dibu p{ float:left;}
	.dibu-l{ float:left; width:70%;}
	.dibu-r{ float:right; width:30%; }
	.dibu-r li{ float:left; margin-right:10px; font-size:18px; font-family:"微软雅黑"; color:#8b8d90;}
	.dibu-r a{ float:left; margin-right:10px; margin-top:4px;}
	.xiala-yema{ width:42px; height:22px; border:#d3d5db 1px solid; border-radius:3px; color:#6f6e6e; font-size:14px;}
	.yema-xz{ color:#fd9162;}
	.dibu-r a:hover{filter:alpha(opacity=70); -moz-opacity:0.7;opacity:0.7; cursor:pointer;}
	.dibu-r li:hover{filter:alpha(opacity=70); -moz-opacity:0.7;opacity:0.7; cursor:pointer;}
	</style>
</head>
<body onload="getReserve(1);getMainType();">
<!-- 页面内容 -->
<div class="page-content">
    <div id="tab-general">
        <div class="row mbl">
            <div class="col-lg-12">
                <div class="col-md-12">
                    <div id="area-chart-spline" style="width: 100%; height: 300px; display: none;"></div>
                </div>                                
            </div>
			<div class="col-lg-12">                           
				<div class="page-content">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel">
                            <div class="panel-body">
                                <div id="grid-layout-table-1" class="box jplist">
									<!-- 查询条件选择栏 -->
                                    <div class="jplist-panel box panel-top">
                                        <div class="jplist-drop-down">
                                            <select class="form-control category-first" onchange="getChildType()">
												<option value='0' selected>--请选择--</option>																							
											</select>
                                        </div>
                                        <div class="jplist-drop-down">
                                            <select class="form-control category-second">
												<option value='0' selected>--请选择--</option>																							
											</select>
                                        </div>
                                        <div class="text-filter-box">
                                            <div class="input-group">
                                            	<span class="input-group-addon"><i class="fa fa-search"></i></span>
                                            	<input data-path=".title" type="text" value="" placeholder="产品名查找" class="form-control search-key"/>
                                            </div>
                                        </div>
										<button type="button" class="jplist-reset-btn btn btn-default" onclick="searchBtnClick()">搜 索<i class="fa fa-search mls"></i></button>
                                    </div>
									
									<!-- 分页查询内容展示 -->									
                                    <div class="box text-shadow">
                                        <table class="demo-tbl reserve-content">
                                        		                                       	                                   					
                                        </table>
                                    </div>
									
									<!-- 没有找到查询结果展示信息框 -->
                                    <div class="box jplist-no-results text-shadow align-center">                                    	
										<table class="demo-tbl">
                                            <tr class="tbl-item"><td>很抱歉！<p style="color:red">没有找到符合条件的结果</p></td></tr>
										</table>										
									</div>
                                    
									<!-- 分页按钮 -->
                                    <div class="jplist-panel box panel-bottom">
                                        <div class="dibu" id="pageDiv">
             								<div class="dibu-l">
                 								<p>共找到<span style="color:#4bc5c3;" id="totalCount">0</span>条记录，每页</p>
                 								<select name="cars" id="pageSize" onchange="getReserve(1)" style="width:80px">
                 									<option value="10">10</option>
                            						<option value="20" selected>20</option>
                            						<option value="30">30</option>
                 								</select>
                 								<p>条</p>
             								</div>
             								<div class="dibu-r">
												<!-- img id="prePage" src="images/jianyou-you.png" title="首页"/-->
												<a id="prePage">&lt;&lt;首页</a>
                  								<ul id="newpage">
                     								
                  								</ul>
                  								<a id="postPage">尾页&gt;&gt;</a>
                  								<!-- img id="postPage" src="images/jiantou-left.png" title="尾页"/-->
             								</div>
         								</div>
                                    </div>
									
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            	</div>
            </div>
        </div>
    </div>
</div>
<!-- 页面内容结束 -->
				
<script src="script/jquery-1.10.2.min.js"></script>
<script src="script/jquery-migrate-1.2.1.min.js"></script>
<script src="script/jquery-ui.js"></script>
<script src="script/bootstrap.min.js"></script>
<script src="script/bootstrap-hover-dropdown.js"></script>
<script src="script/html5shiv.js"></script>
    
<script src="script/jquery.menu.js"></script>

<script src="script/myjs/reserve.js"></script>

<script>
var pageCount = 1;
var currentPage = 0;

var search = "";
var first = 0;
var second = 0;
var size = 20;

var condition = false;
/**
 * 获取预约内容
 */
function getReserve(obj){
	if(!condition && size == $("#pageSize").val() && (obj == 0 || obj == currentPage || obj > pageCount))
		return false;
	if(condition){
		search = $(".search-key").val();
		first = $(".category-first").val();
		second = $(".category-second").val();		
	}
	size = $("#pageSize").val();
	var url="/BeautyClub/reserve/reserve.do?page="+obj+"&size="+size+"&first="+first+"&second="+second+"&search="+search;	
	url=encodeURI(url);
	var tableNode = $(".reserve-content");	
	jQuery.post(url,{},function(data)
	{			
		var innerHtm = "";
		if(data!=null && data!="" && data.length>0)
		{				
			for(var i=1;i<data.length;i++)
			{				
				var rId = data[i].rId==null?"":data[i].rId; 
				var pName = data[i].pName==null?"":data[i].pName;
				var titlePic = data[i].titlePic==null?"":data[i].titlePic;
				var time = data[i].time==null?new Date():new Date(data[i].time);				
				var name = data[i].name==null?"":data[i].name;
				var phone = data[i].phone==null?"":data[i].phone;
				innerHtm += "<tr class='tbl-item'><td class='img' style='width:151px;'>";
				innerHtm += "<input type='hidden' value='"+rId+"' class='reserveId'/>";
				innerHtm += "<img width='120' height='80' src='upload/"+titlePic+"' alt='' title=''/></td>";
				innerHtm += "<td class='td-block'><p class='date'>"+time.toLocaleString()+"</p>";
				innerHtm += "<p class='title'>预约项目："+pName+"</p>";
				innerHtm += "<p class='desc'>姓名："+name+"</p>";
				innerHtm += "<p class='desc'>联系方式："+phone+"</p>";
				innerHtm+="</td></tr>";
			}
			var totalCount = data[0].total==null?0:data[0].total;
			$("#totalCount").text(totalCount);
			var pageNode = $('#newpage');
			var pageInner = "";
			if(totalCount == 0){
				$('.jplist-no-results').show();
				$(".dibu-r").hide();
			}else{
				var page = totalCount/parseInt(size)+(totalCount%parseInt(size)==0?0:1);				
				page = parseInt(page);				
				pageCount = page;				
				var j = 1;
				var k = page;
				if(obj > 4 && page > 7){
					pageInner += "<A ><li>...</li></A>";
					if(page - obj < 3)
						j = page-6;
					else
						j = (obj - 3) > 0?obj-3:1;
					k = (page - obj) > 3?obj+3:page;
				}
				for(var i=0;j<=k&&i<7;i++,j++){
					if(j == obj){
						pageInner += "<A ><li style='color:#fd9162'>"+j+"</li></A>";
						$("#prePage").attr("onclick","getReserve("+1+")");
						$("#postPage").attr("onclick","getReserve("+page+")");
						currentPage = obj;
					}
					else
						pageInner += "<A onclick='getReserve("+j+")'><li>"+j+"</li></A>";
				}
				if(page > 7 && page-obj > 3){
					pageInner += "<A ><li>...</li></A>";
				}
				$('.jplist-no-results').hide();
				$(".dibu-r").show();
			}			
			pageNode.html(pageInner);
			tableNode.html(innerHtm);
		}else{
			$('.jplist-no-results').show();
			$("#totalCount").text(0);
			$(".dibu-r").hide();
		}
		
     },"json");	
}

/**
 * 搜索按钮点击
 */
function searchBtnClick(){
	condition = true;
	getReserve(1);
}
</script>

</body>
</html>